<template>
  <div class="layoutCon">
    <help-header :tab="2"></help-header>
    <div class="breadcrumb">
        <router-link class="home" to="/"></router-link> > <router-link to="/help">취업도우미</router-link> > 성공사례
    </div>
    <div class="infoBox" v-loading="loading">
      <div class="top">
        <span><em>성공사례</em>{{infoData&&infoData.created_at}}<label><b>{{infoData&&curToThousands(infoData.readCount)}}</b> 회 조회</label></span>
        <strong>{{infoData&&infoData.title}}</strong>
        <div class="user">
          <img :src="infoData&&infoData.user.uthumb?infoData.user.uthumb:defaultAvatar2" class="avatar" :onerror="errorAvatar3">
          {{infoData&&infoData.user.name}}
        </div>
      </div>
      <div class="con">
        <div class="des" v-html="infoData&&infoData.content"></div>
      </div>
      <div class="pager">
        <el-button class="btnPre" v-if="preID" @click="openDetail(preID)">이전글</el-button>
        <el-button type="primary" class="catalog" @click="goCatalog('/help/case')">목록으로</el-button>
        <el-button class="btnNext" v-if="nextId" @click="openDetail(nextId)">다음글</el-button>  
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { getJobHelpDetail } from '@/api';
import { toThousands } from '@/utils'
import helpHeader from '@/components/helpHeader'

export default {
  name:'',
  components:{helpHeader},
  props:[],
  data(){
    return {
      loading:true,
      id:0,
      infoData:null,
      nextId:0,
      preID:0,
    }
  },
  computed:{
    ...mapState(['errorAvatar3','defaultAvatar2']),
  },
  created(){
    this.id=this.$route.query.id||0;
    this.id&&this.getDetail();
  },
  mounted(){},
  methods:{
    async getDetail(){
      this.loading=true;
      let res = await getJobHelpDetail({id:this.id});
          if (res.code == 200) {
            this.infoData=res.data.data;
            this.preID=res.data.preID;       
            this.nextId=res.data.nextId;
            this.loading=false;
          }else{
            this.back();
            this.loading=false;
          }
    },
    openDetail(id){
      this.id=id;
      this.getDetail();
    },
    back(){
      this.$router.back()
    },
    goCatalog(path){
      this.$router.push(path)
    },
    curToThousands(num){
      return toThousands(num)
    }
  },
  watch:{
    id (val) {
      let query = this.$router.history.current.query;
      let path = this.$router.history.current.path;
      let newQuery = JSON.parse(JSON.stringify(query));
      newQuery.id = val;
      this.$router.push({ path, query: newQuery });
    }
  }
}
</script>
<style lang="scss" scoped>
  @import "@/assets/styles/help.scss";
</style>